const $ = s => document.querySelector(s)
const $$ = s => document.querySelectorAll(s)
const isMain = str => (/^#{1,2}(?!#)/).test(str)
const isSub = str => (/^#{3}(?!#)/).test(str)
const convert = raw => {
  let arr = raw.split(/\n(?=\s*#{1,3}[^#])/).filter(s => s!="").map(s => s.trim())

  let html = ''
  for(let i=0; i<arr.length; i++) {

    if(arr[i+1] !== undefined) {
      if(isMain(arr[i]) && isMain(arr[i+1])) {
        html += `
<section data-markdown>
<textarea data-template>
${arr[i]}
</textarea>
</section>
`
      } else if(isMain(arr[i]) && isSub(arr[i+1])) {
        html += `
<section>
<section data-markdown>
<textarea data-template>
${arr[i]}
</textarea>
</section>
`
      } else if(isSub(arr[i]) && isSub(arr[i+1])) {
        html += `
<section data-markdown>
<textarea data-template>
${arr[i]}
</textarea>
</section>
`
      } else if(isSub(arr[i]) && isMain(arr[i+1])) {
        html += `
<section data-markdown>
<textarea data-template>
${arr[i]}
</textarea>
</section>
</section>
`
      }      

    } else {
      if(isMain(arr[i])) {
        html += `
<section data-markdown>
<textarea data-template>
${arr[i]}
</textarea>
</section>
`        
      } else if(isSub(arr[i])) {
        html += `
<section data-markdown>
<textarea data-template>
${arr[i]}
</textarea>
</section>
</section>
`        
      }
    }

  }
  return html
}


const Menu = {
  init() {
    console.log('Menu init...')
    this.$settingIcon = $('.control .icon-setting')
    this.$menu = $('.menu')
    this.$closeIcon = $('.menu .icon-close')
    this.$$tabs = $$('.menu .tab')
    this.$$contents = $$('.menu .content')

    this.bind()
  },

  bind() {
    this.$settingIcon.onclick = () => {
      this.$menu.classList.add('open')
    }

    this.$closeIcon.onclick = () => {
      this.$menu.classList.remove('open')
    }

    this.$$tabs.forEach($tab => $tab.onclick = () => {
      this.$$tabs.forEach($node => $node.classList.remove('active'))
      $tab.classList.add('active')
      let index = [...this.$$tabs].indexOf($tab)
      this.$$contents.forEach($node => $node.classList.remove('active'))
      this.$$contents[index].classList.add('active')
    })
  }
}


const ImgUploader = {
  init() {
    this.$fileInput = $('#img-uploader')
    this.$textarea = $('.editor textarea')

    AV.init({
      appId: "UqBaAsQMqOQB3rLwNGLTKtOF-gzGzoHsz",
      appKey: "uv9EyQmkgX7UjUt4TeVUBhVa",
      serverURLs: "https://uqbaasqm.lc-cn-n1-shared.com"
    })

    this.bind()
  },

  bind() {
    let self = this
    this.$fileInput.onchange = function() {
      if (this.files.length > 0) {
        let localFile = this.files[0]
        console.log(localFile)
        if(localFile.size/1048576 > 2) {
          alert('文件不能超过2M')
          return
        }
        self.insertText(`![上传中，进度0%]()`)
        let  avFile = new AV.File(encodeURI(localFile.name), localFile)
        avFile.save({ 
          keepFileName: true, 
          onprogress(progress) {
            self.insertText(`![上传中，进度${progress.percent}%]()`)
          }
        }).then(file => {
          console.log('文件保存完成')
          console.log(file)
          let text = `![${file.attributes.name}](${file.attributes.url}?imageView2/0/w/800/h/400)`
          self.insertText(text)
        }).catch(err => console.log(err))
       }     
    }
  },

  insertText(text = '') {
    let $textarea = this.$textarea
    let start = $textarea.selectionStart
    let end = $textarea.selectionEnd
    let oldText = $textarea.value

    $textarea.value = `${oldText.substring(0, start)}${text} ${oldText.substring(end)}`
    $textarea.focus()
    $textarea.setSelectionRange(start, start + text.length) 
  }
}


const Editor = {
  init() {
    console.log('Editor init...')
    this.$editInput = $('.editor textarea')
    this.$saveBtn = $('.editor .button-save')
    this.$slideContainer = $('.slides')
    this.markdown = localStorage.markdown || `# 第一单元

$\\displaystyle \\sum_{i = 1}^n i = \\texttt{RainPPR}$

## 一、关于诗歌

### 关于诗歌$\\texttt{ 1/4}$

诗歌是一种有意象意境，能引起读者想象，唤起情感共鸣，带给读者强烈的审美体验，且具有音乐韵律美的文学体裁。

### 意象与意境$\\texttt{ 2/4}$

抒发情感借助的具体物象在感情色彩和意义指向上，要与情感之间有联结点、相似点，二者之间的情味和色彩要协调。这些意象有各自的特点和内涵，包含着诗人独特的思想情感和精神寄托。

### ［意象］$\\texttt{3/4}$

* 意象：意象是寄托了作者主观感情的人、事、景、物。

* 作者将自己的情感投射于外界某样“存在”上，这些“存在”就被寄寓了作者的感情（意象）。

### ［意境］$\\texttt{4/4}$

* 意境：意境是一个或多个意象组合在一起的气氛、画面或情境意境，指作者的主观情意与客观物境互相交融而形成的艺术境界。

* 常用表示意境的词语：恬淡闲适，华美壮丽，清新自然，安谧娴静，雄伟壮阔，沉郁悲凉，萧瑟凄凉，雄浑开阔，明快高旷，慷慨激昂，寂静肃穆。

## 二、诗歌朗读

### 表示连停的符号$\\texttt{ 1/3}$

| 符号 |             意义             |
| :--: | :-------------------------- |
|  /   |           短暂停顿           |
|  //  |        较长停顿，换气        |
|  ︵  |    连音，读时要连贯而迅速    |

### 表示轻重强弱的符号$\\texttt{ 2/3}$

| 符号 |             意义             |
| :--: | :-------------------------- |
|  <   | 渐强，读时声音逐渐增大、增强 |
|  >   | 渐弱，读时声音逐渐减小、减弱 |
|  ·   |      重音，读时饱满有力      |
|  ~~  |   轻音，读时声音放慢，放低   |

### 表示音调的符号$\\texttt{ 3/3}$

| 符号 |             意义             |
| :--: | :-------------------------- |
|  ↘   |   下沉音，表示高昂转向低平   |
|  ↗   |   上扬音，表示低平转向高昂   |
|  △   |           表示韵脚           |
|  —   |           尾音拉长           |

## 三、诗歌创作

### 诗歌创作$\\texttt{ 1/4}$

1. 现代诗歌要分行分节，可以押韵，也可以不押韵，但讲究节奏与韵律。
2. 千古文章意为高，思想深刻，情感真挚，内涵丰富。
3. 意象美，意境美，想象美。
4. 讲究炼字，学会恰当运用比喻、排比、反复等修辞手法。

### 陌生化$\\texttt{ 2/4}$

陌生化是文学创作中的一种手法：

* 通过［对常规与常识的偏离］，实现感受与语言理解上的［陌生感］。

* 陌生化使那些司空见惯的语法、规则具有［新的形态、新的审美价值］。

* 常见的陌生化方法有［量词混搭、名词并置、主谓反常搭配、动宾反常搭配、词语交互错位、新奇的比喻、拟人、通感、跨行］等。

### ［陌生化的方法］$\\texttt{3/4}$

|     方法     | 示例                                                         |
| :----------: | ------------------------------------------------------------ |
|   量词混搭   | 谩留一掬相思，待题红叶，奈红叶，更无题处。——《祝英台近》     |
|   名词并置   | 鸡声茅店月，人迹板桥霜。——《商山早行》                       |

### ［陌生化的方法］$\\texttt{4/4}$

|     方法     | 示例                                                         |
| :----------: | ------------------------------------------------------------ |
| 主谓反常搭配 | 蛙声在故乡的田野里，长势良好。——《蛙声》                     |
| 动宾反常搭配 | 我是你河边上破旧的老水车，数百年来纺着疲惫的歌。——《祖国啊，我亲爰的祖国》 |
| 词语交互错位 | 云飘在水上，帆飞在天上。——《莲塘月》                         |

## 四、课文分析

### 课文分析$\\texttt{ } \\rarr$

将诗歌产生的时代背景、历史条件以及作家的生平等与作品联系起来，有利于读者更全面、更深刻、更透彻地了解作家的创作意图和思想情感。

* 六首诗风格不一，表达也不同，但都指向同一个主题——爱：

* 爱山河、爱土地、爱故乡、爱生命。爱的对象可以有千差万别，但六首诗中的爱意却是一样的浓郁动人。

## ①《沁园春·雪》

### 基础信息

作者：毛泽东

风格：雄阔豪迈

### 背景

写于1936年2月，当时毛主席率领红一方面军从陕北出发，准备东渡黄河，进入山西西部。在陕北清涧海拔千米、白雪覆盖的塬上，他面对茫茫雪野、苍茫大地，胸中豪情激荡，写下了这首词。

### 特色

最典型的写作手法是虚实结合，情景交融。上阙写景，下阕抒情，层次分明，结构完整。 

## ②《周总理，你在哪里》

### 基础信息

作者：柯岩

风格：情深意切

### 背景

没有

### 特色

采用虚实结合的写法，以“呼唤-寻找-怀念”为结构线索，大量运用拟人和反复的修辞手法抒发对周总理的无限崇敬和热爱之情。

## ③《我爱这土地》

### 基础信息

作者：艾青

风格：深情哀婉

### 背景

写于1938年，当时日本侵略军连续攻占了华北、华东、华南的广大地区，所到之处疯狂肆虐，妄图摧毁中国人民的抵抗意志。中国人民奋起反抗，进行了不屈不挠的斗争。作为诗人的艾青，坚定地汇入民族解放斗争的洪流中，并成为时代的“吹号者”。他说他“是作为一个悲苦的种族争取解放、摆脱枷锁的歌手而写诗”的。诗人在国土沦丧、民族危亡的关头，满怀对祖国深沉的爱和对侵略者切齿的恨，写下了这首慷慨激昂的诗。

### 特色

采用托物言志的写法，借用一只“用嘶哑的喉咙歌唱的鸟”的形象，来表达诗人深沉的爱国之情。

## ④《乡愁》

### 基础信息

作者：余光中

风格：情思绵绵

### 背景

写于1972年。同所有漂泊在宝岛台湾的人一样，诗人虽然身居台湾岛，但内心深处时时涵动着浓浓的思乡之情，这种思乡情怀客观上具有以往任何时代的乡愁所不可比拟的特定的广阔内容。余光中作为一个离开大陆多年的诗人，饱含深情地写下了这首虽浅显易懂但韵味无穷的《乡愁》。

### 特色

借用意象，托物抒情。作者运用多个意象组成群，营造意境，渲染气氛表情达意。 

## ⑤《你是人间的四月天》

### 基础信息

作者：林徽因

风格：温暖清新

### 背景

这首诗发表于1934年的《学文》上。关于这首诗的创作意终历来有两种说法：一是为悼念徐志摩而作，表达诗人深切的怀念；一是为儿子的出生而作，以表达儿子出生的喜悦和对儿子的希望。其子梁从诫在《倏忽人间四月天》中说:“父亲曾告诉我，《你是人问的四月天》是母亲在我出生后的喜悦中为我而作的，但母亲自己从未对我说起过这件事。”

### 特色

运用新颖、恰当的比喻来表达自己的“爱”，生动形象，给人直观深刻的印象。

## ⑥《我看》

### 基础信息

作者：穆旦

风格：激情饱满

### 背景

这首诗作于1938年，是诗人穆旦随学校（清华大学）来到云南之后创作的第一首诗，写于西南联大文法学院所在地蒙自。诗歌写的是蒙自的春天留给诗人的印象以及诗人从中获得的生命感悟。

### 特色

排比铺陈，描绘出生机勃发的春天图画，增强了诗歌语言气势，更有利于作者情感的表达。
`

    this.bind()
    this.start()
  },

  bind() {
    this.$saveBtn.onclick = () => {
      localStorage.markdown = this.$editInput.value
      location.reload()
    }
  },

  start() {
    this.$editInput.value = this.markdown
    this.$slideContainer.innerHTML = convert(this.markdown)
    Reveal.initialize({
          controls: true,
          progress: true,
          center: localStorage.align === 'left-top' ? false : true,
          hash: true,
          transition: localStorage.transition || 'slide', // none/fade/slide/convex/concave/zoom
          // More info https://github.com/hakimel/reveal.js#dependencies
          dependencies: [
            { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
            { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
            { src: 'plugin/highlight/highlight.js' },
            { src: 'plugin/search/search.js', async: true },
            { src: 'plugin/zoom-js/zoom.js', async: true },
            { src: 'plugin/notes/notes.js', async: true }
          ]
        })
  }
}


const Theme = {
  init() {
    this.$$figures = $$('.theme figure')
    this.$transition = $('.theme .transition')
    this.$align = $('.theme .align')
    this.$reveal = $('.reveal')

    this.bind()
    this.loadTheme()
  },

  bind() {
    this.$$figures.forEach($figure => $figure.onclick = () => {
      this.$$figures.forEach($item => $item.classList.remove('select'))
      $figure.classList.add('select')
      this.setTheme($figure.dataset.theme)
    })

    this.$transition.onchange = function() {
      localStorage.transition = this.value
      location.reload()
    }

    this.$align.onchange = function() {
      localStorage.align = this.value
      location.reload()
    }
  },

  setTheme(theme) {
    localStorage.theme = theme
    location.reload()
  },

  loadTheme() {
    let theme = localStorage.theme || 'league'
    let $link = document.createElement('link')
    $link.rel = 'stylesheet'
    $link.href = `css/theme/${theme}.css`
    document.head.appendChild($link)

    //$(`.theme figure[data-theme=${theme}]`)
    Array.from(this.$$figures).find($figure => $figure.dataset.theme === theme).classList.add('select')
    this.$transition.value = localStorage.transition || 'slide'
    this.$align.value = localStorage.align || 'center'
    this.$reveal.classList.add(this.$align.value)
  }
}

const Print =  {
  init() {
    this.$download = $('.download')

    this.bind()
    this.start()
  },

  bind() {
    this.$download.addEventListener('click', () => {
      let $link = document.createElement('a')
      $link.setAttribute('target', '_blank')
      $link.setAttribute('href', location.href.replace(/#\/.*/, '?print-pdf'))
      $link.click()
    })

    window.onafterprint = () => {
      console.log('close')
      window.close()
    }
  },

  start() {
    let link = document.createElement('link')
    link.rel = 'stylesheet'
    link.type = 'text/css'
    if(window.location.search.match(/print-pdf/gi)) {
      link.href = 'css/print/pdf.css'
      window.print()
    } else {
      link.href = 'css/print/paper.css'
    }
    document.head.appendChild(link)
  }
}

const App = {
  init() {
    [...arguments].forEach(Module => Module.init())
  }
}

App.init(Menu, ImgUploader, Editor, Theme, Print)





